import React from "react";
import Confirm from "../../common/Confirm";

/*导出组件*/
export default class Pagination extends React.Component{
    constructor(props){
        super(props)
        this.style={
            page_ensure:{
                width:'39px',
                height:'19px',
                backgroundColor:"white",
                border:'1px solid #e7e6e6',
                borderRadius:'2px',
                color:"#999"
            }
        }
        this.state={
            pageSize:0,
            dataSize:0,
            eachSize:0,
            text: 1
        }
    }


    componentWillMount(){
    }

    componentWillReceiveProps(nextProps){
        let eachSize = this.props.eachSize;
        let dataSize = nextProps.dataSize
        let pageSize = Math.ceil(dataSize/eachSize)
        this.setState({
            pageSize:pageSize,
            dataSize:dataSize,
            eachSize:eachSize,
        })
    }

    changePageNum(e){
        let numtest = /^[0-9]*$/;
        let text = e.target.value
        if(!numtest.test(text)){
            return
        }
        this.setState({
            text:text
        });
    }

    sure(size,num){
        let pageSize=this.state.pageSize;
        if (num > pageSize) {
            num=pageSize;
            this.setState({
                text:pageSize
            });
        }
        this.props.onSure(size,num);

    }
    left(size,num){
        if(num=="NaN"||num==""){
            this.state.text=""
            return;
        }
        if(this.state.text==1){
            return
        }
        this.setState({
            text : parseInt(num)-1
        })
        this.props.onSure(size,num-1);
    }
    right(size,num){

        if(this.state.text>=this.state.pageSize){
            return
        }
        this.setState({
            text : num+1
        })
        this.props.onSure(size,num+1);
    }

    render(){
        return (
            <div className="lot_modify">
                <ol className="page_code">
                    <li className="page_li1">总计<span>{this.state.dataSize}</span>条</li>
                    <li className="page_li2">每页<span>{this.state.eachSize}</span>条</li>
                    <li className="page_li3">共<span>{this.state.pageSize}</span>页</li>
                    <li>第&nbsp;&nbsp;<input type="text" className="page_input" value={this.state.text} onChange={this.changePageNum.bind(this)}/>&nbsp;&nbsp;页</li>
                    <li><Confirm tcontext={'确定'} style={this.style.page_ensure} touch={this.sure.bind(this,this.state.eachSize,this.state.text)}/></li>
                    <li className="page_button_two">
                        <i className="page_button page_left" onClick={this.left.bind(this,this.state.eachSize,this.state.text)}/>
                        <i className="page_button page_right" onClick={this.right.bind(this,this.state.eachSize,this.state.text)}/>
                    </li>
                </ol>
            </div>
        )
    }
}